{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block title %}Pathway Details{% endblock %}
{% block styles %}
    {{ super() }}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
          integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/graph_explorer.css') }}">

    <style>
        .param {
            margin-bottom: 1em;
        }

        .full-width {
            width: 100%;
        }

        .not-rounded {
            border-radius: 0 !important;
        }

        .not-rounded2 {
            border-radius: 0 !important;
        }

        p {
            margin: 0.5em 0;
        }

        .param button {
            width: 3em;
            margin-right: 0.25em;
        }

        .slider {
            display: block;
        }

        .pathways ul {
            margin: 1em 0;
            padding: 0 0 0 40px;
        }

        .pathways li {
            margin: 1em 0;
        }

        #button-row {
            padding-bottom: 20px;
        }

        #info-table {
            border-radius: 5px;
            width: 95%;
            margin: 0px auto;
            float: none;
        }

        /* Modal loading */
        .loading_modal {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba(255, 255, 255, .8) url(/../../static/img/gif/loading.gif) 50% 50% no-repeat;
        }

        body.loading {
            overflow: hidden;
        }

        body.loading .loading_modal {
            display: block;
        }

        .node {
            cursor: pointer;
        }

        .overlay {
            background-color: #EEE;
        }

        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .node text {
            font-size: 10px;
            font-family: sans-serif;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }

        .templink {
            fill: none;
            stroke: red;
            stroke-width: 3px;
        }

        text a:visited {
            fill: darkpurple;
        }

        text a:hover, text a:active {
            text-decoration: underline;
            fill: darkred;
        }

        .ghostCircle.show {
            display: block;
        }

        .ghostCircle, .activeDrag .ghostCircle {
            display: none;
        }

    </style>
{% endblock %}

{% block scripts %}
    {{ super() }}
    {% include "dependencies/common.html" %}
    <script type="text/javascript"
            src="{{ url_for('static', filename='js/pathway_controller.js', version='20181004') }}"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

    <script>
        var treeData = {{ dendrogram|tojson }}

            // Initializes popover
            $(function () {
                $('[data-toggle="popover"]').popover({
                    placement: 'top',
                    trigger: 'hover'
                })
            });

        var resource = "{{resource}}";
        var pathwayName = "{{ pathway.name }}";
        var pathwayId = "{{pathway.resource_id }}";

    </script>


    {% if dendrogram %}
    <script>
          var Name2Id = "{{ name_to_id_dict }}";
    </script>
        <script type="text/javascript"
                src="{{ url_for('static', filename='js/mapping_landscape.js') }}"></script>
    {% endif %}


{% endblock %}

{% import "meta/macros.html" as compath %}


{% block content %}
    <div class="container" style="margin-top: 50px">
        {{ util.flashed_messages(dismissible=True, container=False) }}

        <div class="panel panel-default">
            <div class="panel-heading">{{ pathway.name }} - Pathway Page</div>
            <div class="panel-body">

                <table id="pathway-info" class="table table-bordered table-striped table-hover">
                    <tbody>
                    <tr>
                        <td>Name</td>
                        <td>
                            <a href="{{ pathway.url }}">{{ pathway }}</a>
                        </td>
                    </tr>
                    <tr>
                        <td>Resource</td>
                        <td>
                            {{ compath.stylize_plugin_name(STYLED_NAMES, resource) }}
                        </td>
                    </tr>
                    <tr>
                        <td>Genes</td>
                        <td>
                            {% for hgnc_symbol in pathway.get_gene_set() %}

                                {% if submitted_gene_set and hgnc_symbol in submitted_gene_set %}
                                    <a href="https://www.ncbi.nlm.nih.gov/gene/?term={{ hgnc_symbol }}"
                                       style="color: red;">{{ hgnc_symbol }}</a>
                                {% else %}
                                    <a href="https://www.ncbi.nlm.nih.gov/gene/?term={{ hgnc_symbol }}">{{ hgnc_symbol }}</a>
                                {% endif %}
                            {% endfor %}
                        </td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td> {{ pathway.get_gene_set()|length }}
                        </td>
                    </tr>
                    </tbody>
                </table>

                {% if dendrogram %}
                    <div class="panel panel-default">
                        <div class="panel-heading">Hierarchy Landscape</div>
                        <div class="panel-body">

                            <div id="chart"></div>
                            <p>The following plot represents the hierarchical landscape of '{{ pathway.name }}'.
                                The hierarchical tree allows to click on the pathways with children (black border) and
                                continue the exploration. All nodes are colored by their source (click on the map for
                                the legend) and cross-link to the original pathway page.
                            </p>
                            <div style="float:right">

                                <a data-toggle="modal" data-target="#legend"><i
                                        class="fa fa-map fa-lg" aria-hidden="false"></i></a>
                            </div>
                            <div id="tree-container"></div>

                        </div>
                    </div>
                {% endif %}

                {{ compath.write_pathways(equivalent_pathways, "Equivalent Pathways") }}
                {{ compath.write_pathways(super_pathways, "Super-Pathways") }}
                {{ compath.write_pathways(sub_pathways, "Sub-Pathways") }}

                <div class="row" id="button-row">
                    <div class="text-center">
                        <div class="btn-group btn-space">
                            <button class="btn btn-primary" id="suggest-by-content"
                                    data-toggle="popover" title="Suggest Pathways"
                                    data-content="Suggests the most similar pathways according to content">
                                Suggest Mappings By Content
                            </button>
                            <button class="btn btn-primary" id="suggest-by-name"
                                    data-toggle="popover" title="Suggest Pathways"
                                    data-content="Suggests the most similar pathways according to name similarity">
                                Suggest Mappings By Name
                            </button>
                            <button class="btn btn-primary" id="infer-mappings"
                                    data-toggle="popover" title="Infer Hierarchical Mappings in other Databases"
                                    data-content="Search for hierarchical mappings based on their equivalent pathways
                                    in other databases">Infer Hierarchical Mappings
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <table id="info-table" class="table table-bordered table-hover table-responsive"></table>
                </div>
            </div>

        </div>
    </div>

    <div class="loading_modal"><!-- Spinner div --></div>
    {% include "visualization/dendrogram/legend.html" %}

    {% include "meta/footer.html" %}
{% endblock %}
